<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    title="查看设备MAC地址"
  >
    <template #content>
      <div class="flex my-[20px] justify-center">
        <div>MAC地址：</div>
        <div class="w-[200px]">
          <p v-for="(item, index) in macList" :key="index">
            <span>{{ item }}</span>
            <SvgIcon icon-class="Close" @click="deleteMac(index)" class="items-center ml-[4px] cursor-pointer inline"/>
          </p>
        </div>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import api from "../../api/index";
import { ElMessage } from "element-plus";
const props = defineProps({
  id: { type: [Number, String], default: "" },
  data: { type: Array, default: () => [] },
});
const macList = ref([]);
watch(
  () => props.data,
  (val) => {
    macList.value = val;
  }
);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};

// 删除mac
const deleteMac = (index) => {
  macList.value.splice(index, 1);
};

const save = async () => {
  loading.value = true;
  try {
    const { code, message } = await api.updateMac({
      id: props.id,
      mac: macList.value,
    });
    if (code != 200) return ElMessage.error(message);
    ElMessage.success("更新成功!");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>
